@import url("reset.css");


/* header css */
.top{
    top: 0;
    height: 100px;
}
.header{
    position: fixed;
    z-index: 9;
    width: 100%;
    height: 100px;
    background-color: white;
    border-bottom: 1px solid #eee;
}
.header .logo{
    float: left;
    margin-left: 76px;
    margin-top: 17px;
}
.header ul{
    float: left;
    margin-left: 290px;
}
.header ul li{
    position: relative;
    float: left;
    width: 120px;
    line-height: 100px;
    text-align: center;
}
.header ul li i{
    position: absolute;
    display: inline-block;
    height: 2px;
    width: 8px;
    background-color: transparent;
    bottom: 0;
    left: 50%;
    margin-left: -4px;
    transition: transform .5s ease;
    
}
.header ul li:hover{
    color:#1695EF;
}
.header ul li:hover i{
    background-color: #1695EF;
    transform: scaleX(4);
}
.header .search{
    float: right;
    margin-right: 62px;
    margin-top: 41px;
}

/* carousel css */

.carousel{
    position: relative;
    height: 560px;
    /* overflow: hidden; */
}
.carousel input{
    display: none;
}
.carousel ul{
    top: 0;
    height: 100%;
}
.carousel ul li{
    position: absolute;
    width: 100%;
    overflow: hidden;
    transition: opacity 1s ease;
}
.carousel ul li img{
    display: block;
    
}
.carousel p{
    position: absolute;
    bottom: 20px;
    left: 50%;
}
.carousel p label{
    float: left;
    width: 30px;
    height: 3px;
    margin: 0 2px;
    /* border-radius: 4px; */
    background-color: rgb(255, 255, 255,.3);
}
[id="one"]:checked ~ ul > li:not(:nth-child(1)){
    opacity: 0;
}
[id="two"]:checked ~ ul > li:not(:nth-child(2)){
    opacity: 0;
}
[id="three"]:checked ~ ul > li:not(:nth-child(3)){
    opacity: 0;
}
[id="one"]:checked ~ p > [for="one"],
        [id="two"]:checked ~ p > [for="two"],
        [id="three"]:checked ~ p > [for="three"]{
            background-color: rgb(255, 255, 255,.8);
        }
.carousel .text{
    position: absolute;
    top: 163px;
    left: 25%;
}
.carousel .text h6{
    line-height:46px;
    font-size:48px;
    font-weight:bold;
    color:rgba(21,149,238,1);
}
.carousel .text span{
    display: inline-block;
    /* height:31px; */
    font-size:32px;
    font-weight:500;
    color:rgba(101,101,101,1);
    line-height:31px;
    margin-top: 19px;
}
/* prouct css */

.product{
    height: 798px;
}
.product-title{
    padding-top: 63px;
    text-align: center;
}
.product-title h4{
    font-size:32px;
    font-weight:800;
    color:rgba(33,33,33,1);
}
.product-title p{
    font-size:16px;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:42px;
}
.product-nav{
    padding-top: 30px;
    text-align: center;
}
.product-nav ul{
    display: inline-block;
}
.product-nav ul li{
    float: left;
    width:160px;
    height:46px;
    font-size:16px;
    font-weight:500;
    line-height:42px;
    color:#333;
    border:1px solid rgba(204, 204, 204, 1);
    cursor: pointer;
}
.product-nav ul li:first-child{
    color:white;
    background:rgba(22,149,239,1);
    border:1px solid rgba(22, 149, 239, 1);
    border-radius:23px 0px 0px 23px;
}
.product-nav ul li:last-child{
    border:1px solid rgba(204, 204, 204, 1);
    border-radius:0px 23px 23px 0px;
}
.product-nav ul li:not(:first-child){
    border-left: none;
}
.product-nav ul li:hover{
    color:white;
    background:rgba(22,149,239,1);
    border:1px solid rgba(22, 149, 239, 1);
}
.product-main{
    margin-top: 89px;
}
.product-case{
    float: left;
    width: 300px;
    background-color: white;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    text-align: center;
}
.product-main .product-case:not(:last-child){
    border-right: none;
}
.product-case img{
    display: block;
    width: 240px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35px;
}
.product-case p{
    padding-top: 40px;
    padding-bottom:20px;
    font-size:16px;  
    font-weight:500;
    color:rgba(66,66,66,1);
}
.product-case span{
    position: relative;
    display: block;
    width:120px;
    line-height:32px;
    font-size:12px;
    font-weight: 500;
    background:rgba(255,255,255,1);
    border:1px solid rgba(204, 204, 204, 1);
    border-radius:16px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 31px;
}
.product-case span i{
    position: absolute;
    color:transparent;
    /* margin-left: 19px; */
}
.product-case:hover p{
    color: #1695EF;
}
.product-case:hover span{
    background-color: #1695EF;
    border-color: #1695EF;
    color: white;
}
.product-case:hover span i{
    color: white;
}
/* new css */
.new{
    height: 610px;
    background-color: #f5f5f5;
}
.new-case{
    float: left;
    width: 890px;
}
.new-title{
    padding-top: 74px;
}
.new-title h5{
    font-size:28px;
    color:#333;
}
.new-title p{
    font-size:16px;
    font-weight:400;
    color:rgba(153,153,153,1);
    padding-top: 10px;
    margin-bottom: 30px;
}
.new-image{
    float: left;
    width: 385px;
}
.new-image h6{
    font-size:16px;
    color:#333;
    line-height: 45px;
    text-align: center;
}
.new-case-text{
    float: right;
    width: 470px;
}
.new-case-text ul li p a{
    line-height: 42px;
}
.new-case-text ul li p i{
    float: right;
    font-size:12px;
    font-weight:500;
    color:rgba(153,153,153,1);
    padding-top: 15px;
}
.new-case-text ul li p a:hover{
    color: #1595EF;
}
.new-right{
    float: right;
    width: 286px;
}
.new-small-case{
    float: left;
    width: 143px;
    height: 173px;
    text-align: center;
    border:1px solid #eee;
    background-color: white;
    cursor: pointer;
}
.new-right .new-small-case:nth-child(odd){
    border-right: none;
}
.new-small-case p{
    font-size:14px;
    font-weight:500;
    margin-top: 25px;
}
.new-active{
    background-image: linear-gradient(#1595EF,#2857F9);
    color: white;
}
.new-small-case img{
    margin-top: 49px;
}


/* footer css */
.footer{
    background-color: white;
    font-size: 12px;   
}
.footer-top{
    height: 260px;
    padding-top: 45px;
    color: black;
    border-bottom: 1px solid #eee;
}
.footer-left{
    float: left;
}
.footer-left ul{
    margin-bottom: 60px;
}
.footer-left ul li{
    float: left;
    width: 80px;
    margin-right: 30px;
}
.footer-left ul li span{
    cursor: pointer;
}
.footer-left ul li span:hover{
    color: #1595EF;
}
.footer-left ul li i{
    float: right;
}
.footer-left p{
    line-height: 25px;
}
.footer-right{
    float: right;
    text-align: right;
    margin-right: 30px;
}
.footer-right p{
    font-size: 26px;
    font-weight: bold;
    color: #1595EF;
    line-height: 50px;
}

.footer-bottom p{
    line-height: 55px;
    color: #7e7e7e;
}
.footer-bottom p i{
    margin-left: 390px;
}

.weixin-pic{
    margin-top: 40px;
    margin-right: 5px;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #757575;
    padding-top: 10px;
    padding-right: 10px;
    cursor: pointer;
}
.weixin-pic:hover{
    background-color: #01CA0D;
}